/* eslint-disable */
const path = require('path')
const IS_PROD = ['production', 'prod'].includes(process.env.NODE_ENV);
const resolve = dir => path.join(__dirname, dir)
//去除console.log
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
// externals
const externals = {
  vue: 'Vue',
  'vue-router': 'VueRouter',
  vuex: 'Vuex',
  'mint-ui': 'mint-ui',
  axios: 'axios',
  jquery: 'jquery'
}
// CDN外链，会插入到index.html中
const cdn = {
  // 开发环境
  dev: {
    css: [],
    js: []
  },
 // 生产环境
  build: {
    // css: ['https://cdn.jsdelivr.net/npm/vant@2.12/lib/index.css'],
    js: [
      'https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js',
      'https://cdn.jsdelivr.net/npm/vue-router@3.5.3/dist/vue-router.min.js',
      'https://cdn.jsdelivr.net/npm/axios@0.24.0/dist/axios.min.js',
      'https://cdn.jsdelivr.net/npm/vuex@3.6.2/dist/vuex.min.js',
      'https://cdn.jsdelivr.net/npm/mint-ui@2.2.13/lib/mint-ui.common.min.js',
      'https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js'
    ]
  }
}

// 压缩资源文件
const CompressionWebpackPlugin = require('compression-webpack-plugin')

// 引入等比适配插件
const px2rem = require('postcss-px2rem')

const webpack = require('webpack')

// 配置 打包分析
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin

//骨架屏渲染
const SkeletonWebpackPlugin = require('vue-skeleton-webpack-plugin')

// 配置基本大小
const postcss = px2rem({
  // 基准大小 baseSize，需要和rem.js中相同
  remUnit: 16
})

module.exports = {
  // 部署应用时的根路径(默认'/'),也可用相对路径(存在使用限制)
  publicPath: process.env.NODE_ENV === 'production' ? './' : '/',
  // 运行时生成的生产环境构建文件的目录(默认''dist''，构建之前会被清除)
  outputDir: 'dist',
  //放置生成的静态资源(s、css、img、fonts)的(相对于 outputDir 的)目录(默认'')
  assetsDir: '',
  // 生产环境的 source map
  productionSourceMap: !IS_PROD,
  //指定生成的 index.html 的输出路径(相对于 outputDir)也可以是一个绝对路径。
  indexPath: 'index.html',
  // 是否在开发环境下通过 eslint-loader 在每次保存时 lint 代码 (在生产构建时禁用 eslint-loader)
  lintOnSave: process.env.NODE_ENV !== 'production', //development
  transpileDependencies:[], //开启语法转换和根据使用情况检测 polyfill
  // transpileDependencies: [/[/\\]node_modules[/\\](.+?)?vue-aplayer(.*)/],
  // /[/\\]node_modules[/\\](.+?)?vue-ele-upload-image(.*)/,
  chainWebpack: config => {
    // 打包分析
    if (IS_PROD) {
      config.plugin('webpack-report').use(BundleAnalyzerPlugin, [
        {
          analyzerMode: 'static'
        }
      ])
    }
    config.resolve.alias
      .set('vue$', 'vue/dist/vue.esm.js')
      .set('@', resolve('src'))
      .set('assets', resolve('src/assets'))
      .set('components', resolve('src/components'))
      .set('api', resolve('src/api'))
      .set('views', resolve('src/views'))
      .set('utils', resolve('src/utils'))
      .set('store', resolve('src/store'))
      .set('router', resolve('src/router'))

    config.resolve.extensions
      .add('.js')
      .add('.vue')
      // .add('.stylus')

    config.plugin('provide').use(webpack.ProvidePlugin, [{
      $: 'jquery',
      jquery: 'jquery',
      jQuery: 'jquery',
      'window.jQuery': 'jquery'
    }])

    /**
     * 添加CDN参数到htmlWebpackPlugin配置中
     */
    // config.plugin('html').tap(args => {
    //   if (IS_PROD) {
    //     args[0].cdn = cdn.build
    //   } else {
    //     args[0].cdn = cdn.dev
    //   }
    //   return args
    // })

    config.module
        .rule('svg')
        .exclude.add(resolve('src/assets/svg_icon'))   // index.js 的路径
        .end()
    config.module
        .rule('icons')
        .test(/\.svg$/)
    .include.add(resolve('src/assets/svg_icon'))  // index.js 的路径
        .end()
        .use('svg-sprite-loader')
        .loader('svg-sprite-loader')
        .options({
            symbolId: 'icon-[name]'
        })
        .end()
  },

  // 使用等比适配插件
  configureWebpack: config => {
    const plugins = [];
    if (IS_PROD) {
      // externals
      // config.externals = externals
      plugins.push(
        new UglifyJsPlugin({
          uglifyOptions: {
            output: {
              comments: false, // 去掉注释
            },
            warnings: false,
            compress: {
              drop_console: true,
              drop_debugger: false,
              pure_funcs: ['console.log']//移除console
            }
          }
        })
      )
      plugins.push(new webpack.HashedModuleIdsPlugin())
      // //对资源文件进行压缩
			plugins.push(new CompressionWebpackPlugin({
        filename: '[path].gz[query]',
        algorithm: 'gzip',
        // test: /\.js$|\.html$|\.json$|\.css/,
        test: /\.js$|\.json$|\.css/,
        threshold: 10240, // 只有大小大于该值的资源会被处理
        minRatio: 0.8, // 只有压缩率小于这个值的资源才会被处理
        // deleteOriginalAssets: true // 删除原文件
      }))
    }
    // 骨架屏渲染
    config.plugins.push(new SkeletonWebpackPlugin({
      webpackConfig: {
        entry: {
          app: path.join(__dirname, './src/Skeleton/index.js'),
        },
      },
      minimize: true,
      quiet: true,
      // 如果不设置那么所有的路由都会共享这个骨架屏组件
      router: {
        mode: 'hash',
        // 给对应的路由设置对应的骨架屏组件，skeletonId的值根据组件设置的id
        routes: [
          { path: '/home', skeletonId: 'home' },
          // { path: '/list', skeletonId: 'list' },
        ]
      }
    }))
  },
  css: {
    requireModuleExtension: true,
    loaderOptions: {
      postcss: {
        plugins: [
          postcss
          // {
          //   loader: "postcss-loader",
          //   options: {
          //     postcssOptions: {
          //       plugins: [
          //         [
          //           "postcss-pxtorem",
          //           {
          //             rootValue: 75
          //           },
          //         ],
          //       ],
          //     },
          //   },
          // },
        ]
      },
      scss: {
        prependData: `@import "~@/assets/styles/global.scss";`
      }
    }
  },
  devServer: {
    port: 8080,
    open: true,
    // https: true,
    hotOnly: false, // 热更新
    overlay: {
      //  当出现编译器错误或警告时，在浏览器中显示全屏覆盖层
      warnings: false,
      errors: true
    },
    // proxy: { //配置多个跨域
    //   '/api': {
    //       target: "",
    //       changeOrigin: true, //开启代理，在本地创建一个虚拟服务端
    //       pathRewrite: {
    //           '^/api': '/'
    //       }
    //   },
    // }
  }
}
